<template>
    <div class="formbody">
        <el-form
                :model="ruleForm"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
        >
            <!--      <el-form-item label="商品分类" prop="region">-->
            <!--        <el-select v-model="ruleForm.region" placeholder="请选择类目">-->
            <!--          <el-option label="男装" value="short"></el-option>-->
            <!--          <el-option label="女装" value="short"></el-option>-->
            <!--          <el-option label="水果" value="apple"></el-option>-->
            <!--          <el-option label="数码" value="camera"></el-option>-->
            <!--        </el-select>-->
            <!--      </el-form-item>-->

            <el-form-item
                    label="商品名称"
                    prop="name"
                    size="medium"
                    style="width: 50%"
            >
                <el-input v-model="goodForm.title"></el-input>
            </el-form-item>

            <el-form-item
                    label="商品价格"
                    size="medium"
                    style="width: 50%"
            >
                <el-input v-model="goodForm.price"></el-input>
            </el-form-item>

            <!--      <el-form-item label="满意度" prop="type">-->
            <!--        <el-checkbox-group v-model="ruleForm.type">-->
            <!--          <el-checkbox label="非常满意" name="type"></el-checkbox>-->
            <!--          <el-checkbox label="十分满意" name="type"></el-checkbox>-->
            <!--          <el-checkbox label="一般满意" name="type"></el-checkbox>-->
            <!--          <el-checkbox label="不满意" name="type"></el-checkbox>-->
            <!--        </el-checkbox-group>-->
            <!--      </el-form-item>-->

            <el-form-item label="商品图片">
                <el-upload

                        class="upload-demo"
                        action="http://localhost:8000/file/upload"
                        :on-success="uploadSuccess"
                        :before-remove="beforeRemove"
                        multiple="false"
                        :file-list="fileList"
                        list-type="picture"
                        :limit="1">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

                <el-image
                        style="width: 100px; height: 100px"
                        :src="goodForm.image"
                        :preview-src-list="srcList">
                </el-image>
                <!--        <i class="el-icon-plus"></i>-->
            </el-form-item>

            <el-form-item label="商品详情" prop="desc">
                <el-input
                        type="textarea"
                        v-model="goodForm.comment"
                        style="width: 60%"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm()"
                >保存
                </el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                fileList:[],
                srcList :[],
                newImage: "",
                ruleForm: {
                    name: "",
                    region: "",
                    date1: "",
                    date2: "",
                    delivery: false,
                    type: [],
                    resource: "",
                    desc: "",
                },
                goodForm: {
                    title: "",
                    image: "",
                    comment: "",
                    price: ''
                },
            };
        },
        mounted() {
            this.edit();
        },
        methods: {
            submitForm() {
                axios.post("/goods", this.goodForm).then((res) => {
                    console.log(res)
                    if (res.data.code === 100) {
                        location.href = 'spgl.html'
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            uploadSuccess(response, file, fileList) {
                console.log(response, file, fileList)
                this.goodForm.image=response.extend.url
            },
            beforeRemove(file) {

            },
            edit() {
                if (location.search !== '') {
                    var str = location.search;
                    var arr = str.split("&")
                    console.log(arr)
                    var title = decodeURIComponent(arr[1].split("=")[1])
                    var image = decodeURIComponent(arr[4].split("=")[1])
                    // console.log(title)
                    this.goodForm.title = title;
                    var id = decodeURIComponent(arr[0].split("=")[1])
                    this.goodForm.id = id;
                    var comment = decodeURIComponent(arr[2].split("=")[1])
                    var price = decodeURIComponent(arr[3].split("=")[1])
                    this.goodForm.comment = comment;
                    this.goodForm.price = price;
                    this.goodForm.image = image;
                    let obj = {name:title,url:image}
                    this.fileList.push(obj)
                }
            }
        }

    };
</script>

<style scoped>


    .el-form-item__label {
        font-size: 18px;
    }

    .formbody {
        /* border: 1px solid red; */
        position: relative;
        margin: 0 auto;
        width: 68%;
        top: 16%;
        font-size: 1px;
    }

    .el-icon-plus {
        font-size: 43px;
        border: 1px solid whitesmoke;
        color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
</style>